<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Pagination, Navigation } from 'swiper/modules'

// 引入样式（必须）
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'

// 轮播数据（组合式 API 中用 ref 或直接常量）
const bannerList = [
  {
    src: '/src/assets/images/14283_1024x768.jpg',
    title: '日用百货超值优惠',
    desc: '好货低价等你来'
  },
  {
    src: '/src/assets/images/14283_1024x768.jpg',
    title: '精品课程限时免费',
    desc: '名师授课，高效学习'
  },
  {
    src: '/src/assets/images/14283_1024x768.jpg',
    title: '学习打卡赢好礼',
    desc: '坚持学习，惊喜不断'
  }
]
</script>
<template>
  <div class="home-container">
    <!-- 顶部三栏：使用 flex 容器包裹 -->
    <div class="top-section">
      <!-- 导航栏 -->
      <div class="nav-sidebar">
        <div class="nav-title">课程分类</div>
        <ul class="nav-list">
          <li class="nav-item">
            <span class="item-icon">📚</span>
            <a href="#">高等数学</a>
            <span class="sep">/</span>
            <a href="#">线性代数</a>
            <span class="sep">/</span>
            <a href="#">概率论</a>
          </li>
          <li class="nav-item">
            <span class="item-icon">🌍</span>
            <a href="#">大学英语</a>
            <span class="sep">/</span>
            <a href="#">学术写作</a>
            <span class="sep">/</span>
            <a href="#">翻译</a>
          </li>
          <li class="nav-item">
            <span class="item-icon">💻</span>
            <a href="#">数据结构</a>
            <span class="sep">/</span>
            <a href="#">操作系统</a>
            <span class="sep">/</span>
            <a href="#">计网</a>
          </li>
          <!-- 新增 -->
          <li class="nav-item">
            <span class="item-icon">🔬</span>
            <a href="#">大学物理</a>
            <span class="sep">/</span>
            <a href="#">电路</a>
            <span class="sep">/</span>
            <a href="#">模拟电子</a>
          </li>
          <li class="nav-item">
            <span class="item-icon">🧬</span>
            <a href="#">生物化学</a>
            <span class="sep">/</span>
            <a href="#">分子生物学</a>
          </li>
          <li class="nav-item">
            <span class="item-icon">🏛️</span>
            <a href="#">中国近代史</a>
            <span class="sep">/</span>
            <a href="#">马克思主义原理</a>
          </li>
        </ul>
      </div>

      <!-- Banner 轮播区 -->
      <div class="banner-container">
        <Swiper
          :modules="[Autoplay, Pagination, Navigation]"
          :autoplay="{ delay: 3000, disableOnInteraction: false }"
          :pagination="{ clickable: true }"
          :navigation="true"
          :loop="true"
          class="my-swiper"
        >
          <SwiperSlide v-for="(item, index) in bannerList" :key="index">
            <div class="banner-slide">
              <img :src="item.src" :alt="item.title" />
              <div class="banner-text">
                <h2>{{ item.title }}<br />{{ item.desc }}</h2>
                <!-- 如果 desc 已包含两行，也可拆成两个标签 -->
              </div>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>

      <!-- 课程学习进度展示 -->
      <div class="progress-sidebar">
        <h3>课程学习进度展示</h3>
        <div class="progress-content">
          <div class="progress-bar">
            <div class="progress-fill" style="width: 65%"></div>
          </div>
          <p>已完成 65%</p>
        </div>
        <div class="progress-list">
          <div class="progress-item">
            <span class="label">Python 入门</span>
            <span class="status">✅ 已完成</span>
          </div>
          <div class="progress-item">
            <span class="label">前端基础</span>
            <span class="status">🔄 学习中</span>
          </div>
          <div class="progress-item">
            <span class="label">数据分析</span>
            <span class="status">⏸️ 未开始</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Hot 课程推荐：独立大块 -->
    <div class="hot-recommend-container">
      <h3 class="section-title">Hot 课程推荐</h3>
      <div class="hot-course-grid">
        <div class="course-card">
          <img src="/src/assets/images/14283_1024x768.jpg" alt="轻奢风香皂盒" />
          <p class="course-title ellipsis-2">
            轻奢风香皂盒免打孔肥皂盒壁挂式家用高档沥水收纳浴室卫生
          </p>
        </div>
        <div class="course-card">
          <img src="/src/assets/images/14283_1024x768.jpg" alt="聪聪卡" />
          <p class="course-title ellipsis-2">
            聪聪卡200元 卡密自动发货【谨防刷单诈骗赌博】售出
          </p>
        </div>
        <div class="course-card">
          <img src="/src/assets/images/14283_1024x768.jpg" alt="血康口服液" />
          <p class="course-title ellipsis-2">
            协和瑞拜血康口服液月经推迟发黑不调停经脱发贫血H
          </p>
        </div>
        <div class="course-card">
          <img src="/src/assets/images/14283_1024x768.jpg" alt="乳山生蚝" />
          <p class="course-title ellipsis-2">
            乳山生蚝鲜活特大牡蛎带壳生吃海蛎子新鲜海鲜水产带
          </p>
        </div>
        <div class="course-card">
          <img src="/src/assets/images/14283_1024x768.jpg" alt="奥妙洗洁精" />
          <p class="course-title ellipsis-2">
            奥妙洗洁精480g红柚生姜【下拉享砍价】
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '@/styles/common' as *;

.home-container {
  width: 100%;
  max-width: 1432px;
  margin: 0 auto;
  padding: 0 100px;
  background: $color-bg;
  position: relative;

  // 顶部三栏容器：flex 布局，对齐
  .top-section {
    display: flex;
    gap: 20px; // ← 组件之间有间距
    margin: 20px 0 30px 0; // ← 与下方 Hot 推荐留出空间
  }

  .my-swiper {
    width: 100%;
    height: 100%;

    // 隐藏默认的 swiper 按钮样式（可选）
    .swiper-button-prev,
    .swiper-button-next {
      color: white;
      background: rgba(0, 0, 0, 0.3);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-top: 0;
      top: 50%;
      transform: translateY(-50%);
      &:hover {
        background: rgba(0, 0, 0, 0.5);
      }
    }
    .swiper-button-prev {
      left: 16px;
    }
    .swiper-button-next {
      right: 16px;
    }

    .swiper-pagination {
      bottom: 20px;
      .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        opacity: 0.6;
        background: #fff;
        &.swiper-pagination-bullet-active {
          opacity: 1;
          transform: scale(1.2);
        }
      }
    }
  }

  .banner-slide {
    position: relative;
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .banner-text {
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      color: white;
      z-index: 10;
      h2 {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 10px;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); // 增强可读性
      }
      p {
        font-size: 16px;
        opacity: 0.9;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }
    }
  }

  // 左右栏宽度增大
  .progress-sidebar {
    width: 260px;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
  }

  .nav-sidebar {
    height: 400px;
    width: 300px;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;

    .nav-title {
      font-size: 16px;
      color: #333;
      margin-bottom: 15px;
      font-weight: bold;
      text-align: left;
    }

    .nav-list {
      list-style: none;
      padding: 0;
      margin: 0;

      .nav-item {
        display: flex;
        align-items: center;
        height: 44px;
        margin-bottom: 12px;
        overflow: hidden;
        white-space: nowrap;

        // 👇 新增：hover 整个 li 变浅灰
        &:hover {
          background-color: #f0f0f0;
          border-radius: 4px;
        }

        .item-icon {
          font-size: 16px;
          color: #666;
          margin-right: 8px;
          flex-shrink: 0;
        }

        a {
          display: inline-block;
          font-size: 14px;
          padding: 6px 8px;
          color: #333;
          border-radius: 4px;
          transition: all 0.2s;
          text-decoration: none;
          line-height: 1.2;
          flex-shrink: 0;

          &:hover {
            color: #ff6b00;
            background-color: #fff8f0;
          }
        }

        .sep {
          color: #999;
          margin: 0 6px;
          flex-shrink: 0;
          user-select: none;
        }

        &.active a {
          color: #ff6b00;
          font-weight: 600;
          background-color: #fff8f0;
        }
      }
    }
  }

  .progress-sidebar {
    height: 400px;
    h3 {
      font-size: 16px;
      color: #333;
      margin-bottom: 15px;
      font-weight: bold;
      text-align: center;
    }
    .progress-content {
      margin-bottom: 20px;
      text-align: center;
      .progress-bar {
        width: 100%;
        height: 10px;
        background: #eee;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 8px;
        .progress-fill {
          height: 100%;
          background: #ff6b00;
          border-radius: 5px;
        }
      }
      p {
        font-size: 13px;
        color: #666;
      }
    }
    .progress-list {
      .progress-item {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        font-size: 13px;
        .label {
          color: #333;
          max-width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .status {
          color: #666;
        }
      }
      .progress-item:last-child {
        border-bottom: none;
      }
    }
  }

  /* Banner 区域 */
  .banner-container {
    flex: 1; // 占据中间剩余空间
    min-width: 0; // 防止 flex 子项溢出
    height: 400px; // 可根据需要调整，但与左右栏等高
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    .banner {
      width: 100%;
      height: 100%;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: #f0f0f0; // 占位背景
      }
      .banner-text {
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        z-index: 10;
        h2 {
          font-size: 32px;
          font-weight: bold;
          margin-bottom: 10px;
          line-height: 1.2;
        }
        p {
          font-size: 16px;
          opacity: 0.9;
        }
      }
      .banner-indicator {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.5);
          cursor: pointer;
          transition: all 0.3s;
          &:hover {
            background: white;
          }
          &.active {
            background: white;
            transform: scale(1.2);
          }
        }
      }
    }
  }

  /* Hot 课程推荐：独立大块 */
  .hot-recommend-container {
    width: 100%;
    .section-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #333;
    }
    .hot-course-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      .course-card {
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        img {
          width: 100%;
          height: 140px;
          object-fit: cover;
          background-color: #f5f5f5;
        }
        .course-title {
          padding: 12px;
          font-size: 14px;
          line-height: 1.4;
          min-height: 56px;
        }
      }
    }
  }
}

// 响应式（可选）
@media (max-width: 1200px) {
  .home-container {
    padding: 0 20px;
    .top-section {
      flex-direction: column;
    }
    .nav-sidebar,
    .progress-sidebar,
    .banner-container {
      width: 100%;
    }
    .hot-course-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
</style>
